{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function () {
        //隐藏住内容
        var loadImg = document.getElementById('downContent'); //选取id为test的元素
        loadImg.style.display = 'none'; // 隐藏选择的元素
        //加载适配
        init();
        //显示load
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素

    });


    //判断加载状态
    var loadhidekey = 0;
    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        init();
        setTimeout(function () {
            //滑到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            loadhidekey = 1
            $("#directory").hide();
            $("#loadingHome").hide();
            //主内容显示
            var loadImg = document.getElementById('downContent');
            loadImg.style.display = 'block';
            //页面添加两个页面固定
            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 100);


    }

    $(window).scroll(function () {
        if (loadhidekey == 1) {
            if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
                $("#directory").show();
            } else {
                $("#directory").hide();
            }
        }
    });




    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }

    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }
        document.getElementById("dir5").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content5');
            animateScroll(target, 250);
        }
        document.getElementById("dir6").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content6');
            animateScroll(target, 250);
        }

        $("#hide1Key").fadeToggle(500);
        hide1 = document.getElementById("hide1");
        var hide1Content = 1;
        hide1.onclick = function () {
            $("#hide1Key").fadeToggle(500);
            // var safetyTriangle = document.getElementById('safetyTriangle').getAttribute("style");
            // safetyTriangle= safetyTriangle.match(/transparent;border-(\S*): 10px/)[1];
            if (hide1Key == 0) {
                //console.log("展开")
                // document.getElementById('two1Triangle').setAttribute("style",
                //     "margin-bottom: 0px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"
                // )
                hide1Key = 1;
            } else {
                //console.log("合上")
                // document.getElementById('two1Triangle').setAttribute("style",
                //     "margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-bottom: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"
                // )
                hide1Key = 0;
            }

        }
    

        //
        var value = document.getElementById('dir1').getAttribute("style")
        value = value.replace(/ffffff/, "fffea4")
        $("#dir1").attr("style", value);
        $("#content1Key").fadeIn(500);
        $("#content2Key").fadeOut(500);
        $("#content3Key").fadeOut(500);
        $("#content4Key").fadeOut(500);
        $("#content5Key").fadeOut(500);
        $("#content6Key").fadeOut(500);


        document.getElementById("dir1").onclick = function () {

            $("#content1Key").fadeIn(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);



            var dir1key = 0;
            if (dir1key == 0) {
                let target = document.getElementById('content1Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();



                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir1").attr("style", value);


                dir1key = 1;
            } else {
                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);
                dir1key = 0
            }

        }
        document.getElementById("dir2").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeIn(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);


            var dir2key = 0;
            if (dir2key == 0) {
                let target = document.getElementById('content2Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();



                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir2key = 1;
            } else {
                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);
                dir2key = 0
            }
        }
        document.getElementById("dir3").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeIn(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);


            var dir3key = 0;
            if (dir3key == 0) {
                let target = document.getElementById('content3Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();



                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);


                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);

                dir3key = 1;
            } else {
                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);
                dir3key = 0
            }
        }
        document.getElementById("dir4").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeIn(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);


            var dir4key = 0;
            if (dir4key == 0) {
                let target = document.getElementById('content4Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();



                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir4key = 1;
            } else {
                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);
                dir4key = 0
            }
        }
        document.getElementById("dir5").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeIn(500);
            $("#content6Key").fadeOut(500);


            var dir5key = 0;
            if (dir5key == 0) {
                let target = document.getElementById('content5Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();



                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir5key = 1;
            } else {
                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);
                dir5key = 0
            }
        }
        document.getElementById("dir6").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeIn(500);

            var dir6key = 0;
            if (dir6key == 0) {
                let target = document.getElementById('content6Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);

                dir6key = 1;
            } else {
                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);
                dir6key = 0
            }
        }
    });
</script>
<script>
    $(document).ready(function () {

        //设置默认
        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", p);
        $("#bg3").attr("style", bg);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Human_Practices";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Communication";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Education";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Inclusivity";
        });

    });
</script>
<script>
    $(document).ready(function () {

        // $("#dir1").hover(function () {
        //     var value = document.getElementById('dir1').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir1").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir1').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir1").attr("style", value);
        // });

        // $("#dir2").hover(function () {
        //     var value = document.getElementById('dir2').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir2").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir2').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir2").attr("style", value);
        // });

        // $("#dir3").hover(function () {
        //     var value = document.getElementById('dir3').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir3").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir3').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir3").attr("style", value);
        // });
        // $("#dir4").hover(function () {
        //     var value = document.getElementById('dir4').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir4").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir4').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir4").attr("style", value);
        // });
        // $("#dir5").hover(function () {
        //     var value = document.getElementById('dir5').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir5").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir5').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir5").attr("style", value);
        // });
        // $("#dir6").hover(function () {
        //     var value = document.getElementById('dir6').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir6").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir6').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir6").attr("style", value);
        // });

    });
</script>

<body class="pc" id="main">
    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 4%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>

    <div id="downContent">
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--HP-Practice.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/0/0c/T--SZPT-CHINA--HP-Communcation.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/6/62/T--SZPT-CHINA--HP-education.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/d/da/T--SZPT-CHINA--HP-Inclusivity.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/2/22/T--SZPT-CHINA--education-font.png"
                    style="margin-top: -50px;margin-left: 361px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>


        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff; ">
            <div id="blue" style="float:left; height: 8500px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p"
                        style="color:#fffea4;padding-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Education</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1"
                            style="color:#ffffff; transition: all 0.3s;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Introduction
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;width: 16vw;height:6vh;">
                            <p id="dir2p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Daily Life
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;width: 16vw;height: 6vh;">
                            <p id="dir3p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                "Skin League"</p>
                        </div>

                        <div id="dir4" style="color:#ffffff;width: 16vw;height:6vh;">
                            <p id="dir4p" style="font-size:1.2rem;padding-top: 0vh;">
                                College
                            </p>
                        </div>

                        <div id="dir5" style="color:#ffffff;width: 16vw;height: 6vh;">
                            <p id="dir5p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Social Media
                            </p>
                        </div>


                        <div id="dir6" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir6p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Message</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">
                <!-- 目录一 -->
                <div id="content1Key" class="k">
                    <div id="content1" class="yj">Introduction:</div>
                    <div class="pb">

                        " Education " is the process of teaching others to think with a tool, knowledge, which is also a
                        giant challenge to us. In order to better to popularize synthetic biology for people of
                        different ages and different educational levels, our team designed and carried out a series of
                        activities, such as:
                        <br>
                        <br>
                        1. Designed children's <strong>picture book</strong> " Bacteria War "
                        <br>
                        2. Designed a series of " synthetic biology "<strong> jigsaw puzzles</strong> over / about students from primary
                        to junior school
                        <br>
                        3. Carry out a special activity for<strong> college students--bring synthetic biology into the
                        laboratory</strong>
                        <br>
                        4. Develop regular synthetic biology and<strong> science courses and live broadcasts </strong>for<strong> social workers
                        </strong>   on social media
                        <br>
                        5. Designed a special arrangement for<strong> the elderly</strong>--the<strong> companionship of synthetic biology</strong>
                        <br>
                        <span id="hide1" style="color: blue;">(<u>please click to view for details</u>)</span>
                        <div id="hide1Key">
                            <div>
                                <image src="https://2021.igem.org/wiki/images/3/36/T--SZPT-CHINA--Inclusivity-pic-18.png"
                                    class="pic"></image>
                            </div>
                            (Preached knowledge about burn prevention in urban villages in Guangzhou on July 13, 2021)
        
                            It is challenging to promote synthetic biology <strong> in different cities</strong> during
                            COVID-19 pandemic, but
                            our team do it. We make full use of our holidays to promote synthetic biology in our
                            <strong> hometown.</strong>The elders know what picture books are and what is synthetic
                            biology
                            for the first
                            time. They also like the biological stories we bring.
                        </div>
                        <br>
                        6. Provided unique education for<strong> non-professional groups--synthetic biology comes into daily
                        life.</strong>
                        <br>
                        <a href="https://2021.igem.org/Team:SZPT-CHINA/Communication">Please click on the communication page “Materials” part</a>

                    </div>


                </div>
                
                <!-- 目录二 -->
                <div id="content2Key" class="k">
                    <div id="content2" class="yj">Synthetic Biology Comes to Daily Life:</div>

                    <div class="pb">
                        Fire is one of the main disasters among various kinds of disasters that most frequently and
                        universally
                        endangers the safety of the people and property. Almost all fires are accompanied by personal
                        burns.<span style="font-weight: 900;"> The
                            physical and psychological damage caused by burn is very huge </span>and the treatment
                        process
                        is
                        long and easy
                        to cause infection. Therefore, we have carried out <span style="font-weight: 900;">fire
                            protection
                            education as the first step for our
                            synthetic biology to enter daily life.</span>
                    </div>

                    <div style="display: flex;">
                        <img src="https://2021.igem.org/wiki/images/4/4e/T--SZPT-CHINA--education-pic-1.png"
                            style="margin-top: 50px;margin-left: 12px;">
                        <img src="https://2021.igem.org/wiki/images/0/0c/T--SZPT-CHINA--education-pic-2.png"
                            style="margin-top: 50px;margin-left: 60px;">
                    </div>
                    <div class="tz">Figue 1. Went to 366 street for fire drill on July 30, 2021</div>

                    <div class="pb">
                        We devoted ourselves to the preaching of fire protection knowledge and more focused on the
                        preaching
                        of
                        our project knowledge. We not only taught non-professionals how to prevent fires, but also
                        taught
                        them
                        what to do to minimize the damage in case of burns? What is synthetic biology behind fire
                        safety?
                        This
                        move was deeply loved by the local people and won unanimous praise. This is undoubtedly a first
                        step
                        to
                        do a good job in education for us, because we have made synthetic biology come into daily life!

                    </div>

                    <video src="https://2021.igem.org/wiki/images/e/e6/T--SZPT-CHINA--education-video-1.mp4" controls
                        style="margin-top: 50px;margin-left: 208px;"> </video>

                    <div class="tz">（For details, please click to watch the video）</div>
                </div>
                <!-- 目录三 -->
                <div id="content3Key" class="k">

                    <div id="content3" class="yj">"Skin League" </div>

                    <div class="pb">
                        "Seeking common ground while reserving differences" has established a bridge of friendly
                        exchanges for China and even the rest of the world. Therefore, we found that there were three
                        teams included WHU & HUST & NUDT working on skin-related projects while our team was looking for
                        partners. We established the <strong>"Skin League" organization</strong> after <strong> we
                            discussed online and we jointly
                            produced a brochure to promote our project</strong> which provided <strong> great
                            convenience for </strong>popularizing
                        skin related knowledge for <strong> all kinds of people.</strong>
                    </div>

                    <img src="https://2021.igem.org/wiki/images/7/76/T--SZPT-CHINA--collaborations-pic-10.png"
                        style="margin-top: 50px;margin-left: 208px;">

                    <div class="tz">Figure 2. Skin League "Group Photo"</div>


                    <img src="https://2021.igem.org/wiki/images/b/b7/T--SZPT-CHINA--Education-pic-plus-1.png"
                        style="margin-top: 50px;margin-left: 281px;">

                    <div class="tz">Figure 3. A physical map of the brochure</div>


                    <img src="https://2021.igem.org/wiki/images/7/72/T--SZPT-CHINA--Education-pic-plus-2.png"
                        style="margin-top: 50px;margin-left: 104px;">

                    <div class="tz">Figure 4. Diagram of the process of the “skin league” using the brochure to preach
                    </div>



                    <div class="pb">"Skin League" not only made our brochures into physical objects, but we also used
                        these brochures to conduct our science popularization activities offline. Our four teams have
                        carried out different levels of science popularization in their respective areas. We not only
                        popularize science among college students around us, but also put our physical brochures in our
                        school or nearby libraries so that we can more many people go to learn about our project, and
                        increase everyone's interest and hobby in synthetic biology.</div>


                    <img src="https://2021.igem.org/wiki/images/a/ab/T--SZPT-CHINA--Education-pic-plus-3.png"
                        style="margin-top: 50px;margin-left: 219px;">

                    <div class="tz">Figure 5. 2021-SZPT-CHINA brochure--Tips on Burned Skin</div>



                    <img src="https://2021.igem.org/wiki/images/c/c9/T--SZPT-CHINA--Education-pic-plus-4.png"
                        style="margin-top: 50px;margin-left: 258px;">

                    <div class="tz">Figure 6. 2021 WHU-China brochure--Propionibacterium acnes</div>


                    <img src="https://2021.igem.org/wiki/images/8/8e/T--SZPT-CHINA--Education-pic-plus-5.png"
                        style="margin-top: 50px;margin-left: 190px;">

                    <div class="tz">Figure 7. 2021 HUST2-China brochure--Tips for Acne Prevention and Treatment</div>



                    <img src="https://2021.igem.org/wiki/images/e/e4/T--SZPT-CHINA--Education-pic-plus-6.png"
                        style="margin-top: 50px;margin-left: 202px;">

                    <div class="tz">Figure 8. 2021 NUDT_CHINA brochure--Light-Mediated Mammalian Cell Cycle Regulation
                    </div>



                </div>
                <!-- 目录4 -->
                <div id="content4Key" class="k">
                    <div id="content4" class="yj">College</div>

                    <div class="pb">College students are a special group who are receiving basic higher education. They
                        are the frontier groups of new technologies and new ideas in society, and senior professionals
                        being cultivated by the state. College students represent the young and energetic people and are
                        the pillars of <strong> social progress</strong>. Therefore, we took this special group as a key
                        target and
                        <strong> carried out a series of synthetic biology popularization activities.</strong>


                    </div>

                    <div class="ej">Science</div>
                    <div style="display: flex;">
                        <img src="https://2021.igem.org/wiki/images/e/ed/T--SZPT-CHINA--education-pic-8.png"
                            style="margin-top: 50px;margin-left: 44px;">
                        <img src="https://2021.igem.org/wiki/images/5/58/T--SZPT-CHINA--education-pic-9.png"
                            style="margin-top: 50px;margin-left: 138px;">
                    </div>

                    <div class="tz">Figure 9. Went to the university classroom for offline preaching on July 15, 2021


                    </div>

                    <div class="pb">
                        We gave <strong>offline lectures</strong> in the classroom for<strong> more than 70 college
                            students </strong>during their spare
                        time. We helped them understood our project, and conducted in-depth popularization of synthetic
                        biology. We heard students expressing their ideas: Synthetic biology is so amazing! We believe
                        this is the best feedback for us. After the lecture, we also received news from many students
                        that they were curious about the experiment and wanted to have a try.


                    </div>

                   
                    <div class="ej">Synthetic Biology Walks into the Laboratory</div>

                    <img src="https://2021.igem.org/wiki/images/8/8a/T--SZPT-CHINA--Inclusivity-pic-plus-1.png"
                        style="margin-top: 50px;margin-left: 111px;">
                    <img src="https://2021.igem.org/wiki/images/9/9d/T--SZPT-CHINA--education-pic-11.png"
                        style="margin-top: 50px;margin-left: 277px;">
                    <img src="https://2021.igem.org/wiki/images/8/81/T--SZPT-CHINA--education-pic-12.png"
                        style="margin-top: 50px;margin-left: 239px;">

                    <div class="tz">Figure 10. Lead college students to experience the joy of synthetic biology in the laboratory from July 17 to 23, 2021
                    </div>

                    <div class="pb">
                        Many college students showed their expectations and hope that we will hold this activity more
                        often since the fluorescent protein DIY activities done in the early stage were well received.
                        Therefore, we decided to<strong> hold a week-long summer camp </strong>during the summer
                        vacation to give
                        non-biological students a better understanding of synthetic biology and biology, and actually
                        experience the biological experiments. 14<strong> college students </strong>were invited into
                        the laboratory for
                        this event due to the epidemic. We have also gained experience from the last event which made
                        <strong> our event successful</strong>! We have prepared the schedule in advance and each
                        experiment included
                        experimental safety guidance, experimental principle explanation, experimental operation
                        explanation, and so on, and <strong> carried out safety supervision throughout the
                            process.</strong>
                    </div>

                    <div class="ej">Product Experience</div>

                    <img src="https://2021.igem.org/wiki/images/e/e0/T--SZPT-CHINA--education-pic-10.png"
                        style="margin-top: 50px;margin-left:284px">

                    <div class="tz">Figure 11. Took college students to experience our products on September 25, 2021
                    </div>

                    <div class="pb">we came up with new ideas in order to allow college students to know <strong>our
                            projects
                            more appropriately.</strong> we organized an event deliberately so that students would no
                        longer have the
                        feeling that "synthetic biology was far away from them. Look! The joy they showed when they
                        picked up our products, which is our biggest motivation for the next popularization.<strong> We
                            hope
                            that synthetic biology will come into daily life and bring more convenience to people in
                            life.</strong></div>
                </div>
                <!-- 目录五 -->
                <div id="content5Key" class="k">
                    <div id="content5" class="yj">Social Media</div>

                    <div class="pb">
                        <strong> We synchronize the education work online in order to allow our education work to affect
                            more
                            people.</strong> In China, wechat official accounts are widely used by media and enterprises
                        as a tool to
                        increase publicity by sending daily articles to fans who follow the account. This year,
                        SZPT-CHINA signed up for its own wechat public account and gained<strong> 508
                            followers</strong>. In the past
                        eight months, SZPT-CHINA 's Wechat public account has posted<strong> 102 articles </strong>and
                        gained<strong> more than
                            20000 pageviews.</strong> The content of articles includes team promotion, publicity for the
                        project,
                        popularization of synthetic biology, a summary of each activity and sharing of some excellent
                        projects of iGEM competition in previous years, or programs for learning synthetic biology.
                        At the same time, we also through major social media, such as WeChat, Bilibili, Twitter, etc.,
                        we have<strong> made a number of small videos for children and developed synthetic biology
                            learning
                            plans for social workers</strong> who are interested in synthetic biology. We also launched
                        an online
                        live broadcast at the same time.

                    </div>

                    <div class="ej">Synthetic Biology Learning Program
                    </div>

                    <image src="https://2021.igem.org/wiki/images/a/a0/T--SZPT-CHINA--Education-pic-plus-7.png"
                        class="pic" style="margin-left: 267px;width: 550px;">

                    </image>
                    <div class="tz">Figure 12. The number of participants in each course of study

                    </div>
                    <table border="1" style="font-size: 150%;text-align: center;line-height: 28px;margin-top: 50px;">
                        <tr>
                            <td style="width: 207px;"></td>
                            <td style="width: 600px;">Theme </td>
                            <td style="width: 500px;">Links（<a href="https://2021.igem.org/wiki/images/e/e3/T--SZPT-CHINA--education-plus.docx">Click to see translation</a>)</td>
                        </tr>
                        <tr>
                            <td>Phase one</td>
                            <td>What is "synthetic life"?</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/9/94/T--SZPT-CHINA--Education-pic-plus-a-1.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase two</td>
                            <td>Engineering thinking: synthesize life like Lego?</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/f/f2/T--SZPT-CHINA--Education-pic-plus-a-2.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase three</td>
                            <td>Data Driven: Improve Synthetic Life? </td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/a/a1/T--SZPT-CHINA--Education-pic-plus-a-3.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase four</td>
                            <td>Accelerate evolution: acquire functions that are not available in nature</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/a/aa/T--SZPT-CHINA--Education-pic-plus-a-4.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase five</td>
                            <td>Applications of synthetic biology</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/9/9a/T--SZPT-CHINA--Education-pic-plus-a-5.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase six</td>
                            <td>Applications of synthetic biology(2)</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/3/34/T--SZPT-CHINA--Education-pic-plus-a-6.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase seven</td>
                            <td>Applications of synthetic biology(3)</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--Education-pic-plus-a-7.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase eight</td>
                            <td>Applications of synthetic biology(4)</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--Education-pic-plus-a-8.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase nine</td>
                            <td>Conclusion: How far is it to create life</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/8/8c/T--SZPT-CHINA--Education-pic-plus-a-9.png">Tweet,
                                    please click to view for details</a></td>
                        </tr>
                        <tr>
                            <td>Phase ten</td>
                            <td>Synthetic biology in daily life</td>
                            <td><a
                                    href="https://2021.igem.org/wiki/images/d/d9/T--SZPT-CHINA--Education-pptx-plus-a-1.pptx">PPT,
                                    please click to view for details</a></td>
                        </tr>

                    </table>
                    <div class="pb">
                        We <strong>regularly published </strong>an article on synthetic biology<strong> through the
                            WeChat
                            official account and
                            PPT. </strong>This provides great convenience for those who<strong> don’t have time to come
                            to the site to learn.</strong>
                        They<strong> can learn about synthetic biology anytime and anywhere.</strong> We could also
                        gather everyone's
                        questions in real time and give corresponding answers. We summarized some excellent iGEM
                        projects and translated English information into Chinese, so that the Chinese public can more
                        easily understand the information and further disseminate them. We could also gather everyone's
                        questions in real time and give corresponding answers.


                    </div>

                    <div class="ej">"Synthetic Biology in Life" Live Broadcast</div>
                    <div class="pb">Most people think that synthetic biology is a high-end term. But what exactly is
                        synthetic biology? Is it really out of reach? What is the connection between synthetic biology
                        and our lives? We launched a series of live broadcasts for non-biological college students,
                        which were jointly organized by SZPT-CHINA & NWU-CHINA-A & TJU-CHINA & TJUSLS-CHINA. We<strong>
                            mainly
                            introduced the project and talked about synthetic biology relevant to our lives.</strong>
                    </div>
                    <image src="https://2021.igem.org/wiki/images/0/0d/T--SZPT-CHINA--Education-pic-plus4-1.png"
                        class="pic" style="width:1000px;margin-left:10px;"></image>
                    <!-- <div class="display:flex">
                        <img src="https://2021.igem.org/wiki/images/7/72/T--SZPT-CHINA--education-pic-18.png"
                            style="width: 400px;margin-left: 30px;margin-top: 81px;">
                        <img src="https://2021.igem.org/wiki/images/0/09/T--SZPT-CHINA--education-pic-19.png"
                            style="width: 400px;margin-left: 15px;margin-top: 64px;">
                    </div>
                    <div class="display:flex">
                        <img src="https://2021.igem.org/wiki/images/4/49/T--SZPT-CHINA--education-pic-20.png"
                            style="width: 400px;margin-top: 44px;margin-left: 31px;">
                        <img src="https://2021.igem.org/wiki/images/4/4e/T--SZPT-CHINA--education-pic-21.png"
                            style="width: 405px;margin-top: 47px;margin-left: 9px;height: 425px;">
                    </div> -->

                    <div class="tz">
                        Figure 14. 2021 SZPT-CHINA live broadcast feedback pictures
                    </div>

                    <div class="pb">
                        I believe everyone is not unfamiliar when talk about medicine. It became mysterious when
                        medicine is combined with synthetic biology. The live broadcast of 2021 SZPT-CHINA takes
                        everyone into synthetic biology. We introduced in an interesting and easy-to-understand way to
                        show how we used synthetic biology to improve bacterial genes, how we made chewing gum and
                        yogurt into drugs, and how to improve coconuts as a burn dressing.
                    </div>

                    <img src="https://2021.igem.org/wiki/images/e/e9/T--SZPT-CHINA--education-pic-22.png"
                        style="margin-top: 50px;margin-left: 206px;">
                    <div class="tz">Figure 15. NWU-CHINA-A live picture</div>

                    <div class="pb">Indigo dyes must be familiar to everyone. As a popular color, indigo has a long
                        history of development. In this issue of synthetic biology in daily life, we were based on
                        NWU-CHINA-A's iGEM project this year to introduce everyone to the development process of indigo
                        dyes and the concept of it.
                    </div>

                    <img src="https://2021.igem.org/wiki/images/5/58/T--SZPT-CHINA--education-pic-23.png"
                        style="margin-top: 50px;margin-left: 283px;">
                    <div class="tz">Figure 16. TJU-CHINA live picture</div>

                    <div class="pb">
                        Health is the most concerned issue for each of us. It was introduced the knowledge of in vivo
                        delivery of biomacromolecule drugs and the advantages of the chromosome-free drug delivery
                        model, and bring a brief introduction to CRISPR technology during the live broadcast based on
                        the iGEM project in Tianjin this year.</div>
                    <img src="https://2021.igem.org/wiki/images/8/8e/T--SZPT-CHINA--education-pic-24.png"
                        style="margin-top: 50px;margin-left: 221px;">
                    <div class="tz">Figure 17. TJUSLS-CHINA live picture</div>

                    <div class="pb">Garbage-where is it when we ignore or avoid it in our lives and when it is discarded
                        by us. Where does it go? What can synthetic biology do? We were based on TJUSLS-CHINA's iGEM
                        project this year to share ideas in the live broadcast room. In the world we discarded, maybe we
                        are able to create a better life.</div>
                </div>
                <!-- 目录六 -->
                <div id="content6Key" class="k">
                    <div id="content6" class="yj">Message:</div>
                    <div class="pb">Letting synthetic biology comes into our lives and bringing convenience to our lives
                        motivates us a lot in the process of education and synthetic biology popularization. It is very
                        difficult for us, but the happiness and pride we get are priceless.<strong> We will be always on
                            the
                            way. We will insist on bringing synthetic biology into more people's daily lives!
                        </strong>We believe
                        that as long as we do it persistently, we will succeed.
                    </div>
                </div>
            </div>
            <div id="red" style="float: left;margin-left: 140px; height: 8500px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <div>
            <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
                style="margin-top: -372px;width: 1920px;"></image>
        </div>

    </div>

</body>
<style>
    .yj {
        margin-top: 50px;
    }

    .k {
        box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
        padding: 50px;
        margin-top: 50px;
    }
</style>
<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style =
            `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/8500/, "12000")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/8500/, "12000")
            $("#red").attr("style", value);
            
            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);


            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir5").attr("style", value);

            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir6").attr("style", value);

            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir4p").attr("style", value);

            var value = document.getElementById('dir5p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir5p").attr("style", value);


            var value = document.getElementById('dir6p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir6p").attr("style", value);


            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>